<template>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col" v-for="head, index in table_head" :key="index">{{ head }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="data, dIndex in data_list" :key="dIndex">
                    <th scope="row">{{ dIndex + 1 }}</th>
                    <td>
                        <a class="text-decoration-none" :href="data.url" :title="data.title" target="_blank">{{ data.title }}</a>
                    </td>
                    
                    <td>{{ data.count }}</td>
                    <td>
                        <span>{{ data.score }}</span>
                    </td>
                    <td class="text-center">
                        <span>{{ data.rank }}</span>
                        <i :class="changeValueClass(data.change_score)"></i>
                    </td>
                    <td>{{ data.article_type }}</td>
                    <td>{{ data.source }}</td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script>
import * as api from "@/api/news.js"
export default {
    
    data() {
        return {
            table_head: [],
            data_list: []
        }
    },
    computed: {
        changeValueClass() {
            return (value) => {
                let baseClass = ["pl-1", "ml-1"]
                // 自定义的类
                if (value == 0) {
                    baseClass.push("app-line-icon")
                } else {
                    baseClass.push(value > 0 ? "bi-arrow-up-short text-success" : "bi-arrow-down-short text-danger")
                }
                return baseClass.join(" ")
            }
        }
    },
    created() {
        this.getNewsList()
    },
    methods: {
        
        getNewsList() {
            api.getHotRankNews({
                count: 10
            }).then(res => {
                const { head, table } = res.data
                this.table_head = head
                this.data_list = table
            })
        }
    },
}
</script>

<style lang="scss" scoped></style>